const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackDevServer = require("webpack-dev-server");
const path = require("path");

const baseConfig = {
	entry: {
		// hot: "webpack/hot/dev-server.js",
		// client: "webpack-dev-server/client/index.js?hot=true&live-reload=true",
		app: [
			"webpack/hot/dev-server.js",
			"webpack-dev-server/client/index.js?hot=true&live-reload=true",
			"./src/index.js",
		],
	},
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "js/index.[hash].js",
		// library: "webPlay",
		// libraryTarget: "umd",
		clean: true,
		globalObject: "this",
		library: {
			name: "webpackNumbers",
			type: "umd",
		},
	},
	devServer: {
		hot: false,
		client: false,
		static: {
			directory: path.join(__dirname, "public"),
		},
		compress: true,
		port: 9000,
	},
	module: {
		rules: [
			{
				test: /.m?js$/,
				exclude: /(node_modules)/,
				use: [
					"thread-loader",
					"cache-loader",
					{
						loader: "babel-loader",
						options: {
							presets: ["@babel/preset-env"],
						},
					},
				],
			},
			{
				test: /.s?css$/,
				use: [
					(function () {
						if (process.env.NODE_ENV == "development") {
							return "style-loader";
						}
						return {
							loader: MiniCssExtractPlugin.loader,
						};
					})(),
					"css-loader",
					"cache-loader",
					"sass-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: ["postcss-preset-env"],
							},
						},
					},
				],
			},
			{
				test: /\.(png|jpe?g|gif)$/i,
				use: [
					"cache-loader",
					{
						loader: "url-loader",
						options: {
							limit: 8192,
						},
					},
					{
						loader: "file-loader",
						options: {
							name: "[assets][name][hash].[ext]",
						},
					},
				],
			},
			{
				test: /\.svg$/,
				loader: "svg-inline-loader",
			},
			// {
			// 	test: /\.ext$/,
			// 	use: ["cache-loader"],
			// 	include: path.resolve("src"),
			// },
		],
	},
	optimization: {
		minimizer: [
			new CssMinimizerPlugin({
				parallel: true,
				minimizerOptions: {
					preset: [
						"default",
						{
							discardComments: { removeAll: true },
						},
					],
				},
			}),
		],
		// minimizer:false  //* 开发环境使用压缩
	},
	plugins: [
		new webpack.AutomaticPrefetchPlugin(),
		new HtmlWebpackPlugin({
			title: "web-play-video",
			template: path.resolve(__dirname, "./public/index.html"),
			fileName: "index.html",
			inject: "body",
		}),
		new webpack.HotModuleReplacementPlugin(),
		new MiniCssExtractPlugin({
			filename: "css/[name].[hash].css",
		}),
	],
};

module.exports = baseConfig;
